<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       
    </div>

    <script type='text/javascript'>
        const vm = new Vue({
           el:'#root',
           /**
            * (1) 配置对象有一个template属性，这个和angular差不多，可以用反引号放多行代码  
            * (2) 必须要有、只能有一个根元素，即最外面要套一个元素(一般是div)
            * (3) 将会把id为root的div完全替换
            * (4) template不能作为根元素，因为最终会去掉，这样一来可能就有多个根元素，不行
            * */  
           template:`
            <div>
               <span>{{n}}</span> <br> <br>
               <button @click="add">点击增加</button>
               <button @click="bye">点我销毁vm</button>
            </div>
           `,
           data:{
             n:1
           },
           methods: {
              add(){
                this.n++
              },
              bye(){
                this.$destroy()
              }
           },
           beforeCreate() {
              console.log('beforeCreate：未进行数据代理(将data中的属性添加过来)')
           },
           created() {
              console.log('Created：已完成数据监测(getter、setter)、数据代理')
              console.log(this);
            //   debugger
           },
           beforeMount() {
               console.log('beforeMount：已生成虚拟DOM，但是还没有将真实DOM挂载到模板上')
           },
           mounted() {
               console.log('Mounted：已经将真实DOM挂载到模板上');
           },
           beforeUpdate() {
               console.log('beforeUpdate：数据是最新的，但是还未更新到页面中(页面和数据为保持同步)');
           },
           updated() {
               console.log('Updated：新数据与虚拟DOM进行比较，并更新到页面中，此时页面和数据保持同步');
           },
           beforeDestroy() {
               console.log(`beforeDestroyed：即将销毁vm，关闭定时器、自定义事件等收尾工作(去掉自己定义的一些东西)
                            在此之后再更新数据无法更新到页面上，因为你已经进入到销毁流程了，就说明准备好自杀就行了
               `);
           },
        })
    </script>
</body>
</html>